<template>
  <div class="workstation" :class="theme">
    <h1>餐厅工作台</h1>

    <!-- 新订单区域 -->
    <div class="order-section">
      <h2>待处理订单</h2>
      <div class="orders-list">
        <div v-for="order in pendingOrders" :key="order.id" class="order-card">
          <div class="order-header">
            <span class="order-number">订单号: #{{ order.id }}</span>
            <span class="order-time">{{ order.time }}</span>
          </div>
          <div class="order-items">
            <div
              v-for="(item, index) in order.items"
              :key="index"
              class="order-item"
            >
              <span>{{ item.name }} x {{ item.quantity }}</span>
              <span>¥{{ item.price * item.quantity }}</span>
            </div>
          </div>
          <div class="order-total">
            总计: ¥{{ calculateTotal(order.items) }}
          </div>
          <div class="order-actions">
            <button @click="completeOrder(order)" class="complete-btn">
              完成订单
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 已完成订单区域 -->
    <div class="completed-section">
      <h2>已完成订单</h2>
      <div class="orders-list">
        <div
          v-for="order in completedOrders"
          :key="order.id"
          class="order-card completed"
        >
          <div class="order-header">
            <span class="order-number">订单号: #{{ order.id }}</span>
            <span class="order-time">{{ order.completedTime }}</span>
          </div>
          <div class="order-items">
            <div
              v-for="(item, index) in order.items"
              :key="index"
              class="order-item"
            >
              <span>{{ item.name }} x {{ item.quantity }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkStation",
  data() {
    return {
      pendingOrders: [],
      completedOrders: [],
      theme: "theme-light",
      newOrderAudio: null,
      completeOrderAudio: null,
    };
  },
  methods: {
    calculateTotal(items) {
      return items.reduce(
        (total, item) => total + item.price * item.quantity,
        0
      );
    },
    completeOrder(order) {
      // 从待处理订单中移除
      const index = this.pendingOrders.findIndex((o) => o.id === order.id);
      if (index > -1) {
        this.pendingOrders.splice(index, 1);
        // 添加完成时间
        order.completedTime = new Date().toLocaleTimeString();
        // 添加到已完成订单
        this.completedOrders.unshift(order);
        // 播放取餐提示音
        this.playCompleteAudio();
        // 发送完成通知
        this.sendCompletionNotification(order);
      }
    },
    receiveNewOrder(order) {
      // 添加时间戳
      order.time = new Date().toLocaleTimeString();
      // 添加到待处理订单
      this.pendingOrders.push(order);
      // 播放新订单提示音
      this.playNewOrderAudio();
    },
    playNewOrderAudio() {
      if (this.newOrderAudio) {
        this.newOrderAudio.click(); // 【主要代码 - 解决报错】先模拟与页面进行交互，防止报错
        this.newOrderAudio.play().catch((error) => {
          console.warn("自动播放被阻止:", error);
          // 可以在这里添加一个视觉提示，告诉用户需要交互
        });
      }
    },
    playCompleteAudio() {
      if (this.completeOrderAudio) {
        this.completeOrderAudio.play();
      }
    },
    sendCompletionNotification(order) {
      // 检查通知权限
      if (Notification.permission === "granted") {
        new Notification(`订单 #${order.id} 已完成`, {
          body: "请顾客取餐",
          icon: "/favicon.ico",
        });
      } else if (Notification.permission !== "denied") {
        Notification.requestPermission().then((permission) => {
          if (permission === "granted") {
            this.sendCompletionNotification(order);
          }
        });
      }
    },
    initAudio() {
      // 初始化音频
      this.newOrderAudio = new Audio("/audio/new-order.mp3");
      this.completeOrderAudio = new Audio("/audio/complete-order.mp3");
    },
  },
  mounted() {
    this.initAudio();
    // 模拟接收新订单
    // 实际项目中这里应该使用WebSocket或轮询
    setInterval(() => {
      const mockOrder = {
        id: Math.floor(Math.random() * 1000),
        items: [
          { name: "宫保鸡丁", quantity: 1, price: 28 },
          { name: "米饭", quantity: 2, price: 3 },
        ],
      };
      this.receiveNewOrder(mockOrder);
    }, 30000); // 每30秒模拟一个新订单
  },
};
</script>

<style scoped>
.workstation {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.order-section,
.completed-section {
  margin-bottom: 30px;
}

.orders-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.order-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-card.completed {
  background-color: #f8f8f8;
  opacity: 0.8;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-number {
  font-weight: bold;
}

.order-time {
  color: #666;
}

.order-items {
  margin-bottom: 15px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.order-total {
  font-weight: bold;
  text-align: right;
  margin-bottom: 15px;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
}

.complete-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.complete-btn:hover {
  background-color: #45a049;
}

.theme-light {
  background-color: #f5f5f5;
  color: #333;
}

.theme-dark {
  background-color: #333;
  color: #fff;
}
</style>
